Login Dialogs: update styling to match mockups

Remove backgrounds, change button styling, reduce font sizes.

https://bugzilla.gnome.org/show_bug.cgi?id=619955

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 01c0e7b80d2bbc973f6b4a5a42b5fac5195f8607..f2b5f3326770c7cc51c816891784bfb188e260d4 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -2027,6 +2027,10 @@ StScrollBar StButton#vhandle:hover
 }
 
 .login-dialog {
+    /* Reset border and background */
+    border: none;
+    background-color: transparent;
+
     border-radius: 16px;
     min-height: 150px;
     max-height: 700px;
@@ -2093,7 +2097,7 @@ StScrollBar StButton#vhandle:hover
 }
 
 .login-dialog-not-listed-label {
-    font-size: 14pt;
+    font-size: 10.5pt;
     font-weight: bold;
     color: #666666;
 }
@@ -2102,12 +2106,23 @@ StScrollBar StButton#vhandle:hover
     color: #E8E8E8;
 }
 
+.login-dialog-username {
+    font-size: 16pt;
+    font-weight: bold;
+    text-align: left;
+    padding-left: 15px;
+    text-shadow: black 4px 4px 3px 0px;
+}
+
 .login-dialog-prompt-layout {
-    padding-bottom: 32px;
+    padding-top: 24px;
+    padding-bottom: 12px;
+    spacing: 8px;
 }
+
 .login-dialog-prompt-label {
-    color: white;
-    font-size: 20pt;
+    color: #eeeeee;
+    font-size: 14px;
 }
 
 .login-dialog-prompt-entry {
@@ -2115,7 +2130,9 @@ StScrollBar StButton#vhandle:hover
     border-radius: 4px;
     border: 2px solid #5656cc;
     color: black;
-    background-color: white;
+    background-gradient-start: #333333;
+    background-gradient-end: white;
+    background-gradient-direction: vertical;
     caret-color: black;
     caret-size: 1px;
     width: 15em;
@@ -2179,16 +2196,26 @@ StScrollBar StButton#vhandle:hover
     height: .75em;
 }
 
-.unlock-dialog-user-name {
-    padding: 4px;
-    border-radius: 4px;
-    border: 2px solid #5656cc;
-    color: black;
-    background-color: white;
-    caret-color: black;
-    caret-size: 1px;
-    width: 15em;
-    text-align: right;
+.login-dialog .modal-dialog-button {
+    border: 1px solid white;
+    border-radius: 5px;
+    padding: 3px 18px;
+}
+
+.login-dialog .modal-dialog-button:default {
+    background-gradient-start: #6060cc;
+    background-gradient-end: #3030E0;
+    background-gradient-direction: vertical;
+    border: 2px solid #1010E0;
+}
+
+.login-dialog .modal-dialog-button:hover {
+    background-gradient-start: #7878cc;
+}
+
+.login-dialog .modal-dialog-button:active,
+.login-dialog .modal-dialog-button:pressed {
+    background-gradient-start: #9090cc;
 }
 
 .unlock-dialog-user-name-container {
@@ -2209,7 +2236,7 @@ StScrollBar StButton#vhandle:hover
 
 .screen-shield-clock {
     color: white;
-    text-shadow: black 0px 0px 0px 1px;
+    text-shadow: black 0px 0px 2px 0px;
     font-weight: bold;
     text-align: center;
 }

diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index 2b3eb37b0e79a80f71910c0b7fd127ee3b982587..8dba006749bff55273b8cca0745220a1d4f35433 100644 (file)
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -34,11 +34,11 @@ const UserWidget = new Lang.Class({
         this.actor.add(this._avatar.actor,
                        { x_fill: true, y_fill: true });
 
-        this._label = new St.Label({ style_class: 'unlock-dialog-user-name' });
+        this._label = new St.Label({ style_class: 'login-dialog-username' });
         this.actor.add(this._label,
                        { expand: true,
                          x_fill: true,
-                         y_fill: true });
+                         y_align: St.Align.MIDDLE });
 
         this._userLoadedId = this._user.connect('notify::is-loaded',
                                                 Lang.bind(this, this._updateUser));
@@ -105,10 +105,7 @@ const UnlockDialog = new Lang.Class({
 
         this._promptLabel = new St.Label({ style_class: 'login-dialog-prompt-label' });
         this._promptLayout.add(this._promptLabel,
-                               { expand: false,
-                                 x_fill: true,
-                                 y_fill: true,
-                                 x_align: St.Align.START });
+                               { x_align: St.Align.START });
 
         this._promptEntry = new St.Entry({ style_class: 'login-dialog-prompt-entry',
                                            can_focus: true });
@@ -118,9 +115,7 @@ const UnlockDialog = new Lang.Class({
 
         this._promptLayout.add(this._promptEntry,
                                { expand: true,
-                                 x_fill: true,
-                                 y_fill: false,
-                                 x_align: St.Align.START });
+                                 x_fill: true });
 
         this.contentLayout.add_actor(this._promptLayout);